<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="referrer" content="no-referrer">
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }
    video {
      filter: saturate(100%) !important;
      -webkit-filter: saturate(100%) !important;
    }
  </style>
  <link rel="stylesheet" href="//unpkg.pstatp.com/xgplayer/3.0.0-alpha.110-18/dist/xgplayer.min.css"/>
  <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
</head>
<button id="btn" onclick="playNext()">播放下一个</button>
<body>
<section id="wrapper">
  <div id="vs"></div>
</section>
<script type="module">
  var vConsole = new window.VConsole();
  import Player from '../../packages/xgplayer/src/index'
  import Mp4Plugin from '../../packages/xgplayer-mp4/src/index'
  var videoList = [
    {
      definition: '360p',
      //keyValue: "0ff2ccbec8ab45349ae912c89056bc62",
      bitrate: 311473,
      vheight: 360,
      vwidth: 640,
      duration:90,
      url: './video/360p.mp4'
    },
    {
      definition: '480p',
      //keyValue: "288e672cd2944bd0ab4aa0e03b4de438",
      bitrate: 437288,
      vheight: 480,
      vwidth: 860,
      duration:90,
      url: './video/480p.mp4'
    },
    {
      definition: '720p',
      //keyValue: "d0aabcd3605c4ed8962fc6819764ec90",
      bitrate: 915105,
      vheight: 720,
      vwidth: 1270,
      duration:90,
      url: './video/720p.mp4'
    },
    {
      definition: '1080p',
      //keyValue: "d0aabcd3605c4ed8962fc6819764ec90",
      bitrate: 2713749,
      vheight: 1080,
      vwidth: 1920,
      duration:90,
      url: './video/1080p.mp4'
    }
  ]
  let player = new Player({
    id: 'vs',
    autoplay: true,
    volume: 1,
    url: '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo-720p.mp4',
    poster: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg",
    playsinline: true,
    thumbnail: {
    pic_num: 44,
    width: 160,
    height: 90,
    col: 10,
    row: 10,
    // urls: ['//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo-thumbnail.jpg'],
    },
    definition: {
      defaultDefinition: '720p',
      // list: videoList
    },
    // TestSpeed: {
    //   url: '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo-720p.mp4',
    //   openSpeed: true,
    //   loadSize: 200*1024,
    //   testTimeStep: 5000,
    //   testCnt: 3,
    // },
    height: window.innerHeight -300,
    width: window.innerWidth,
    waitingInBufferTimeOut: 5000,
    //plugins: [Mp4Plugin],

    // set mp4Plugin support Apple's MMS
    //mp4Plugin: {
    //  preferMMS: true,
    //}
  });
  window.player = player

  function playNext() {
    player.playNext({
      vid: 'v02d02g10000cag6m4gmmdqu846g76ag123',
      id: 'mse',
      isLive: false,
      autoplay: true,
      // plugins: [Mp4Plugin],
      url: './video/1080p.mp4'
    })
  }
  window.playNext = playNext
  // player.on('ended', () => {
  //   player.replay()
  // })
  player.on('pause', () => {
    console.log('>>>>pause')
  })
  player.on('play', () => {
    console.log('>>>>play')
  })
  player.on('seeking', () => {
    console.log('>>>>seeking')
  })
  player.on('seeked', () => {
    console.log('>>>>seeked')
  })
  player.usePluginHooks('replay','replayClick', () => {
    console.log('>>>>replayClick')
  })
</script>
<!--<script type="module" src="./index.js"></script>-->
</body>
</html>
